<template>
  <view class="container ipt">
    <view class="content-wrapper">
      <view class="main-content">{{ content }}</view>
      <view class="area-code" v-if="isArea">(+{{ areaCode }})</view>
    </view>
    <view class="icon-wrapper" @click="togglePasswordVisibility">
      <image v-if="isImages" :src="isHide ? hidePwd : showPwd" mode="aspectFit"></image>
    </view>
    <uv-input :value="modelValue" border="none" inputAlign="center" :password="password" :placeholder="placeholder"
      @change="inputChange" clearable></uv-input>
  </view>
</template>

<script setup>
import { ref } from "vue"
import hidePwd from "@/static/images/login/hidePwd.png"
import showPwd from "@/static/images/login/showPwd.png"

/**
 * isImages 是否显示图片
 * isArea 是否显示区号
 * content 标题
 * areaCode 区号
 **/
const props = defineProps({
  modelValue: {
    type: String,
    required: true
  },
  isImages: {
    type: Boolean,
    default: false,
  },
  isArea: {
    type: Boolean,
    default: false,
  },
  content: {
    type: String,
    default: "",
  },
  areaCode: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  password: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["pwdType", "change", "update:modelValue"]);

const isHide = ref(true);

const togglePasswordVisibility = () => {
  isHide.value = !isHide.value
  emits("pwdType", isHide.value)
}
const inputChange = (e) => {

  emits("update:modelValue", e)
  emits('change', e)
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  margin-left: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100rpx;
}

.main-content {
  font: 12px/1.5 'PingFang SC', 'PingFang SC-Semibold';
  font-weight: 600;
  color: #6e6e6e;
}

.area-code {
  font: 12px/1.5 'PingFang SC', 'PingFang SC-Semibold';
  font-weight: 600;
  color: #c7c7c7;
  margin-top: 10rpx;
}

.icon-wrapper {
  flex: 1;
  height: 26rpx;
  text-align: center;
  position: absolute;
  right: 30rpx;

  image {
    width: 26rpx;
    height: 100%;
  }
}

.Arab {
  .icon-wrapper {
    left: 30rpx;
    right: initial;
  }
}
</style>